<template>
  <div>
    <div class="content-me">
      <button v-on:click="updateShowState()">
        <div class="svg-wrapper-1">
          <div class="svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
              <path fill="none" d="M0 0h24v24H0z"></path>
              <path fill="currentColor"
                    d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
            </svg>
          </div>
        </div>
        <span>我要留言</span>
      </button>
    </div>
    <div v-if="showState">
      <leave-message-back @updateShowState="updateShowState"/>
    </div>
  </div>
</template>

<script>

import LeaveMessageBack from "@/public/pendant/leavmessage/message";

export default {
  name: "LeaveMessage",
  components: {LeaveMessageBack},
  data() {
    return {
      showState: false
    }
  },
  methods: {
    updateShowState() {
      this.showState = !this.showState
      if (this.showState) {
        this.disableScroll()
      } else {
        this.enableScroll()
      }
    },
    disableScroll(domId) {
      let scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop;
      // 禁止滑动
      const selectDom = domId || 'app';
      document.getElementById(selectDom).style.position = "fixed";
      document.getElementById(selectDom).style.top = "-" + scrollTopVal + 'px';
      document.getElementById(selectDom).style.width = '100%';
      document.getElementById(selectDom).style.overflow = "hidden";
    },
    enableScroll(domId) {
      const selectDom = domId || 'app';
      let scrollVal = Math.abs(parseFloat(document.getElementById(selectDom).style.top));
      document.getElementById(selectDom).style.position = "";
      document.getElementById(selectDom).style.overflow = "";
      document.getElementById(selectDom).style.top = "";
      if (document.body) {
        document.body.scrollTop = scrollVal;
      }
      if (document.documentElement) {
        document.documentElement.scrollTop = scrollVal;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content-me {
  position: fixed;
  bottom: 60%;
  right: 0;
  z-index: 999;
  transition: visibility 0.3s;
}

.back-top-show {
  visibility: visible;
}

.back-top-hidden {
  visibility: hidden;
}

/* From uiverse.io by @adamgiebl */
button {
  cursor: pointer;
  background: #FBCA1F;
  font-family: inherit;
  padding: 10px 3px 10px 5px;
  font-weight: 900;
  font-size: 15px;
  border: 2px solid black;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  box-shadow: 0.1em 0.1em;
  transition: all 0.1s;
  overflow: hidden;
  width: 35px;
  text-align: left;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

svg {
  margin: 0 0 5px 2px;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateY(2.2em) rotate(135deg) scale(1.1);
}

button:hover span {
  transform: translateY(5.5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}


</style>